<template>
    <a-input-number size="small" :disabled="readonly" :min="Option.min ?? Infinity" :max="Option.max ?? Infinity"
        :step="Option.step || 1" style="width:100%" :precision="Option.precision" v-model:value="InputValue" :controls="false"
        :addon-after="Option.Unit" />
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue';

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    Option: Object,
    modelValue: Number,
});

const InputValue = ref();

const readonly = ref(false);

watchEffect(() => {
    readonly.value = !!props.Option.readonly
})

watch(() => props.modelValue, val => {
    InputValue.value = val;
}, { immediate: true });

watch(InputValue, (val) => {
    emit('update:modelValue', val);
})


</script>
<style lang="less" scoped>

</style>